<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tn-person-r .tn-title {
            float: left;
            font-size: 14px;
            position: relative;
            margin-left: 20px;
            width: 80px;
        }

        .tn-person-r .tn-title .tn-tab {
            border: 1px solid #FCFCFC;
            border-width: 0 1px;
            color: #4C4C4C;
            display: inline-block;
            cursor: pointer;
            position: relative;
            z-index: 9999;
            padding: 0 2px 0 0;
            text-decoration: none;
            width: 76px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .tn-person-r .tn-arrow {
            display: inline-block;
            width: 8px;
            height: 5px;
            margin: 0 0 0 5px;
            overflow: hidden;
            vertical-align: middle;
            font-size: 12px;
            line-height: 13px;
            -webkit-transform: none;
            -moz-transform: none;
            -o-transform: none;
            background: url(./images/icon.png) 0 -977px no-repeat;
        }

        .tn-person-r .tn-new {
            margin-top: -10px;
            position: absolute;
            background: url(./images/icon.png) 0 -1017px;
            width: 14px;
            height: 11px;
        }

        .tn-person-r .tn-topmenulist-a-weibo,
        .tn-topmenulist-a-other {
            width: 77px;
        }

        .tn-person-r .tn-topmenulist-a {
            border: 1px solid #EBBE7A;
            border-top: 0;
            overflow: hidden;
            -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
            -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
            top: 41px;
            left: 0;
        }

        .tn-person-r .tn-topmenulist .tn-text-list {
            border-bottom: 1px solid #FECC5B;
            margin: 0 0 -2px;
            width: 80px;
        }

        .tn-person-r .tn-topmenulist .tn-text-list li {
            width: 50px;
            line-height: 31px;
            border-bottom: 1px solid #FECC5B;
            color: #333;
            padding: 0 15px;
        }
    </style>
</head>

<body>
    <div class="top-nav">
        <div class="tn-bg">
            <div class="tn-header">
                <div class="tn-person-r">
                    <div class="tn-title " id="SI_Top_Weibo">
                        <a target="_blank" href="javascript:;" class="tn-tab" id="weibo">
                            <i>微博<em class="tn-new" style="display:none;"></em>
                                <span class="tn-arrow"> </span>
                            </i>
                        </a>
                        <div style="display: none;" class="tn-topmenulist tn-topmenulist-a tn-topmenulist-a-weibo"
                            id="weibo_list">
                            <ul class="tn-text-list">
                                <li>私信</li>
                                <li>评论</li>
                                <li>@我</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 获取元素
        const top_weibo = document.querySelector('#SI_Top_Weibo');
        const weibo = document.querySelector('#weibo');
        const weibo_list = document.querySelector('#weibo_list');

        // 鼠标移入事件
        top_weibo.onmouseover = function() {
            weibo_list.style.display = 'block';
            weibo.style.backgroundColor = "lightgrey";
            weibo.style.color = "orange";
        }

        // 鼠标移出事件
        top_weibo.onmouseout = function() {
            weibo_list.style.display = 'none';
            weibo.style.backgroundColor = "";
            weibo.style.color = "";
        }
    </script>
</body>

</html>